<template>
  <div
    class="showViewboxs"
    @click="chenge"
    :class="is_home ? 'showViewboxs2' : ''"
  >
    <div class="showViewboxs_top">
      <span class="showViewboxs_text_size">
        {{ listobjs.school_name }}
      </span>
      <div v-if="scheck">
        <t-checkbox
          v-if="!is_waichu"
          v-model="select"
          @change="inspect"
          style="font-size: 14px; padding: 0; background-color: transparent"
        ></t-checkbox>
        <span v-else style="color: red; font-size: 12px; margin-left: 10px"
          >外出</span
        >
      </div>
      <div v-else>
        <div v-if="authority([4])">
          <t-tag
            variant="light"
            theme="success"
            v-if="listobjs.class_session_status == 1"
            >已开课</t-tag
          >
          <t-tag
            variant="light"
            theme="danger"
            v-else-if="listobjs.class_session_status == 2"
            >异常</t-tag
          >
          <t-tag variant="light" theme="danger" v-else>未开课</t-tag>
        </div>
        <div v-else>
          <t-tag
            variant="light"
            theme="success"
            v-if="listobjs.class_session_status == 1"
            >已完成</t-tag
          >
          <t-tag
            variant="light"
            theme="danger"
            v-else-if="listobjs.class_session_status == 2"
            >异常</t-tag
          >
          <t-tag variant="light" theme="danger" v-else>待完成</t-tag>
        </div>
      </div>
    </div>
    <div class="showViewboxs_cen">
      <div class="showViewboxs_cen_text">
        <span
          >是否代课：<t-tag variant="light" theme="success" v-if="listobjs.is_daike==1">未代课</t-tag
          ><t-tag variant="light" theme="danger" v-else>代课</t-tag></span
        >
        <span> </span>
      </div>
      <div class="showViewboxs_cen_text">
        <span>班级：</span>
        <span
          >{{ listobjs.province }}{{ listobjs.municipality
          }}{{ listobjs.region }}(区/县)</span
        >
      </div>
      <div class="showViewboxs_cen_text">
        <span>班级：</span>
        <span>{{ listobjs.grade }}{{ listobjs.calss }}</span>
      </div>
      <div class="showViewboxs_cen_text">
        <span>科目：</span>
        <span>{{ listobjs.subject }}</span>
      </div>
      <div class="showViewboxs_cen_text">
        <span>授课模式：</span>
        <span>{{ listobjs.teaching_mode }}</span>
      </div>
    </div>
    <div>
      <slot name="booton"> </slot>
    </div>
  </div>
</template>
  
  
  <script>
import { setStorage, getStorage } from "@/utils/util";
export default {
  props: {
    is_home: {
      typeof: Boolean,
      default: function () {
        return false;
      },
    },
    is_waichu: {
      typeof: Boolean,
      default: function () {
        return false;
      },
    },
    listobjs: {
      typeof: Object,
      default: function () {
        return {};
      },
    },
    // 是否全选
    selectArr: {
      typeof: Boolean,
      default: function () {
        return false;
      },
    },
    // 是否多选
    scheck: {
      typeof: Boolean,
      default: function () {
        return false;
      },
    },
  },
  data() {
    return {
      select: false, //是否选择多选
      userInfo: "", //用户权限字段
    };
  },

  mounted() {
    this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限
    // 一开始就是全选
    this.select = this.selectArr;
    this.inspect();
  },
  methods: {
    authority(groupArr = [0]) {
      // 权限筛选
      let userInfo = this.userInfo;
      // 当前权限和传来的权限组进行对比
      if (groupArr.some((item) => Number(item) === userInfo)) return true;
      return false;
    },
    chenge() {
      if (this.scheck) {
        if (!this.is_waichu) {
          this.select = !this.select;
          this.inspect();
        }
      } else {
        this.$router.push({
          path: `/H5OnlineDetails`,
          query: { id: this.listobjs.id },
        });
      }
    },
    inspect() {
      this.$emit("inspect", this.select, this.listobjs.id);
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.showViewboxs {
  padding: 10px;
  background: #f6f6f6;
  margin: 10px 0;
  box-sizing: border-box;
  border-radius: 10px;
}
.showViewboxs_text_size {
  color: #030302;
  font-size: 16px;
  font-weight: 500;
  flex-wrap: nowrap;
  width: 80%;
  margin-right: 10px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.showViewboxs_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.showViewboxs_cen {
  font-size: 12px;
  color: #87898c;
  .showViewboxs_cen_text {
    line-height: 22px;
  }
}
.showViewboxs2 {
  background-color: #ffffff !important;
}
</style>
  